<template>
  <view :class="['container',{'dark':theme=='dark'}]">
    <view class="top">
      <view :class="['fixedTop','top1',{'dark':theme=='dark'}]">
        <view class="flex userInfo">
          <image class="avatar"  :src="head" mode=""></image>
          <view class="namephobe">
            <view class="name">{{$t('bico.W499')}} {{info.account}}</view>
            <view class="phone">{{$t('bico.W623')}} {{info.uid}}</view>
          </view>
        </view>

        <!-- 语言选择 -->
        <view :class="[{'listItemDark':theme=='dark'}]" @click="gocontact">
          <view class="enttm">
            <image :src="theme=='dark' ? '/static/ico/kefu2.png' : '/static/ico/kefu.png'" class="flex_image2"></image>
          </view>
        </view>

        <!-- 在线客服 -->
        <view :class="[{'listItemDark':theme=='dark'}]" @click="funsItemClick(7)">
          <view class="ent" >
            <image :src="theme=='dark' ? '/static/ico/shezhi2.png' : '/static/ico/shezhi.png'" class="flex_image2"></image>
          </view>
        </view>

        <!-- 用户中心 -->
        <view>
          <view class="enttmm">
            <view class="funsItemText2">{{$t('bico.W501')}}</view>
          </view>
        </view>

        <!-- 邀请好友 -->
        <navigator  @click="funsItemClick(15)">
          <view class="ente">
            <view class="aui-flex-box-fr">
              <view class="flex itemLeft">
                <image src="../../static/ico/yqhy.png" class="flex_image"></image>
                <view class="size30">{{$t('bico.W508')}}</view>
                <text class="iconfont icon-xiangyou1"></text>
              </view>
            </view>
          </view>
        </navigator>

        <view class="funBox">
          <view :class="['flex','funs',{'darksss':theme=='dark'}]">

            <view class="funsItem" @click="funsItemClick(5)">
              <image class="funsItemImage" src="../../static/ico/zc.png" mode=""></image>
              <view class="funsItemText">{{$t('bico.W502')}}</view>
            </view>

            <view class="funsItem" @click="funsItemClick(1)">
              <image class="funsItemImage" src="../../static/ico/gg.png" mode=""></image>
              <view class="funsItemText">{{$t('bico.W503')}}</view>
            </view>

            <view class="funsItem" @click="funsItemClick(3)">
              <image class="funsItemImage" src="../../static/ico/cb.png" mode=""></image>
              <view class="funsItemText">{{$t('bico.W504')}}</view>
            </view>
            <view class="funsItem" @click="funsItemClick(4)">
              <image class="funsItemImage" src="../../static/ico/tb.png" mode=""></image>
              <view class="funsItemText">{{$t('bico.W505')}}</view>
            </view>

            <view class="funsItem" @click="funsItemClick(2)">
              <image class="funsItemImage" src="../../static/ico/aq.png" mode=""></image>
              <view class="funsItemText">{{$t('bico.W506')}}</view>
            </view>

          </view>
        </view>
      </view>
      <view class="top3">

        <view :class="['list','funs',{'darksss':theme=='dark'}]">
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]">
            <view class="flex itemLeft">
              <image :src="theme=='dark' ? '/static/ico/heiye.png' : '/static/ico/heiye2.png'" class="flex_image"></image>
              <view class="size30">{{$t('bico.W507')}}</view>
            </view>

            <!-- <u-switch
              space="2" activeColor="#3f4d6b"
              v-model="value3"
              @change="switchChange"
              size="35"
              inactiveColor="#8fa3ff">
            </u-switch> -->
            <switch checked="true" @change="switchChange" activeColor="#3f4d6b" :checked="theme=='dark' ? true : false" />
          </view>

          <!-- 身份认证 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(6)">
            <view class="flex itemLeft">
              <image src="../../static/ico/sfrz.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W509')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 我的团队 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(16)">
            <view class="flex itemLeft">
              <image src="../../static/ico/wdtd.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W510')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 申请上币 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(18)">
            <view class="flex itemLeft">
              <image src="../../static/ico/sqsbs.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W511')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 法币商家 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(17)">
            <view class="flex itemLeft">
              <image src="../../static/ico/sqbs.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W512')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 邀请好友 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(15)">
            <view class="flex itemLeft">
              <image src="../../static/ico/yqhy.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W513')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 帮助中心 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(12)">
            <view class="flex itemLeft">
              <image src="../../static/ico/bzzx.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W514')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 服务条款 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(13)">
            <view class="flex itemLeft">
              <image src="../../static/ico/fwtk.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W515')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 隐私政策 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(11)">
            <view class="flex itemLeft">
              <image src="../../static/ico/yszc.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W516')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 官方社区 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(9)">
            <view class="flex itemLeft">
              <image src="../../static/ico/gfsq.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W517')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 语言选择 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(7)">
            <view class="flex itemLeft">
              <image src="../../static/ico/yyxz.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W518')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 应用版本 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(14)">
            <view class="flex itemLeft">
              <image src="../../static/ico/yybb.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W519')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 白皮书 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="funsItemClick(10)">
            <view class="flex itemLeft">
              <image src="../../static/ico/bps.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W520')}}</view>
            </view>
            <image src="../../static/member/right_icon.png" class="flex_image3"></image>
          </view>

          <!-- 退出 -->
          <view :class="['flex','listItem',{'listItemDark':theme=='dark'}]" @click="show = true">
            <view class="flex itemLeft">
              <image src="../../static/ico/aqtc.png" class="flex_image"></image>
              <view class="size30">{{$t('bico.W521')}}</view>
            </view>

          </view>
          <u-modal v-model="show" :show-title='false' 
		   :cancel-text="cancelText"  :confirm-text="confirmText"
		   :content="content" @confirm="logout"></u-modal>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {domain} from '@/common/domain.js'
import {mapState,mapActions,mapGetters} from 'vuex';
import uniPopup from '@/components/uni-popup2.vue';
import {commonNewsList,commonCarousel,huobiTicket,info,logout,commonContact ,} from '../../common/apiString.js'
export default {
  components: {
    uniPopup
  },
  data() {
    return {
		confirmText:this.$t('login.c1'),
		cancelText:this.$t('login.c2'),
      mycontact:'',
      content:this.$t('bico.W522'),
      value3:false,
      show:false,
      isFinger:"0",
      token:'',
      info:'',
      fingerBool:0,
      faceBool:0,
      head:'../../static/rvm.png'
    }
  },
  filters:{
    toFixed2: function (value, options) {
      value = Number(value);
      return value.toFixed(2);
    },
  },
  computed:{
    ...mapState({
      theme:state=>state.theme
    }),
  },
  onPullDownRefresh(){
    this.getUserInfo();
  },
  onLoad() {
	uni.setNavigationBarTitle({
	  	title: this.$t('bico.W524'),
	})
    if(uni.getStorageSync('token')&&!uni.getStorageSync('isFinger')){
      this.isFinger = uni.getStorageSync('fingerBool')
      if(this.isFinger){
        uni.hideTabBar()
      }
    }
  },
  onShow() {
    console.log(uni.getStorageSync('fingerBool'))
    this.fingerBool = uni.getStorageSync('fingerBool')
    this.changeFooter();
    this.getUserInfo();
    this.value3= this.theme=='dark'?true:false;
    this.token = uni.getStorageSync('token');
    this.$utils.setTheme(this.theme);
    this.contact()
  },
  methods: {
    contact() {
      this.$utils.initData({
        url: commonContact,
        type: 'post'
      }, (res, msg) => {
        //uni.stopPullDownRefresh();
        this.mycontact = res
      })
    },

    //路由开始

    funsItemClick(index){
      if(index==1){
        uni.navigateTo({
          url:'/pages/neWs/neWs'//公告
        })
      };
      if(index==2){
        uni.navigateTo({
          url:'/pages/mine/security'//安全中心
        })
      };
      if(index==3){
        uni.navigateTo({
          url:'/pages/assets/charge'//冲币
        })
      };
      if(index==4){
        uni.navigateTo({
          url:'/pages/assets/mention'//提币
        })
      };

      if(index==5){
        uni.navigateTo({
          url:'/pages/assets/assets'//我的资产
        })
      };


      if(index==6){
        uni.navigateTo({
          url:'/pages/mine/userCenter'//身份认证
        })
      };

      if(index==7){
        uni.navigateTo({
          url:'/pages/mine/lang'//语言选择
        })
      };

      if(index==8){
        uni.navigateTo({
          url:'/pages/mine/lang'//在线客服
        })
      };

      if(index==9){
        uni.navigateTo({
          url:'/pages/telegram/telegram'//官方社区
        })
      };

      if(index==17){
        uni.navigateTo({
          url:'/pages/business/business'//法币商家
        })
      };
      if(index==16){
        uni.navigateTo({
          url:'/pages/member/member'//我的团队
        })
      };
      if(index==15){
        uni.navigateTo({
          url:'/pages/share/share'//邀请好友
        })
      };
      if(index==14){
        uni.navigateTo({
          url:'/pages/version/version'//应用版本
        })
      };
      if(index==13){
        uni.navigateTo({
          url:'/pages/mairivacy/mairivacy'//服务条款
        })
      };
      if(index==12){
        uni.navigateTo({
          url:'/pages/contact/contact' //帮助中心
        })
      };
      if(index==11){
        uni.navigateTo({
          url:'/pages/privacy/privacy'//隐私政策
        })
      };
      if(index==10){
        uni.navigateTo({
          url:'/pages/Whiteskin/Whiteskin'//白皮书
        })
      };
      if(index==18){
        uni.navigateTo({
          url:'/pages/Apply/Apply'//申请上币
        })
      };
    },

    //路由结束

    fingerFuc(){
      var that = this
      if('Android'==plus.os.name) {
        this.type = "fingerAlert";//兼容Android平台
      }
      if(plus.fingerprint.isSupport()){
        if(!plus.fingerprint.isEnrolledFingerprints()){
          plus.nativeUI.toast('当前设备未录入指纹！');
        }
        plus.fingerprint.authenticate(function(e){
          if('Android'==plus.os.name) {
            that.type = "";//兼容Android平台
          }
          uni.setStorageSync('isFinger',true)
          that.isFinger = 0;
          uni.showTabBar();
        }, function(e){
          plus.nativeUI.toast('指纹匹配失败');
          if('Android'==plus.os.name) {
            that.type = "";//兼容Android平台
            plus.fingerprint.cancel();
          }

        },{
          message:"授权登录"
        });
      }else{
        plus.nativeUI.toast('此设备不支持指纹设置！');
      }
    },
    fingerCancel(){
      this.type = "";
      plus.fingerprint.cancel();
    },
    changeFooter() {
     uni.setTabBarItem({
       index: 0,
       text: this.$t('tabBar.index')
     });
     uni.setTabBarItem({
       index: 1,
       text: this.$t('tabBar.business')
     });
     uni.setTabBarItem({
       index: 2,
       text: this.$t('tabBar.perpetual')
     });
     uni.setTabBarItem({
       index: 3,
       text: this.$t('tabBar.agreements')
     });
     uni.setTabBarItem({
       index: 4,
       text: this.$t('tabBar.mine')
     });
    },
    // 开启面部识别
    switchChangeFace(){
      var that = this
      console.log(that.faceBool)
      if( that.faceBool==0){
        that.faceBool = 1
      }else{
        that.faceBool = 0
      }
    },
    // 开启指纹识别
    switchChangeFinger(){
      var that = this
      console.log(that.fingerBool)
      if( that.fingerBool==0){
        that.fingerBool = 1
      }else{
        that.fingerBool = 0
      }
      if(plus.fingerprint.isSupport()){
        if(!plus.fingerprint.isEnrolledFingerprints()){
          plus.nativeUI.toast('当前设备未录入指纹！');
          if( that.fingerBool==0){
            that.fingerBool = 1
          }else{
            that.fingerBool = 0
          }
        }
        if('Android'==plus.os.name) {
          plus.nativeUI.showWaiting("指纹匹配中...");

        }
        plus.fingerprint.authenticate(function(e){
          if('Android'==plus.os.name) {
            plus.nativeUI.closeWaiting();//兼容Android平台关闭等待框
          }
          plus.nativeUI.toast('指纹匹配成功');
          console.log(that.fingerBool)
          uni.setStorageSync('fingerBool',that.fingerBool)

        }, function(e){
          if('Android'==plus.os.name) {
            plus.nativeUI.closeWaiting();//兼容Android平台关闭等待框
            plus.fingerprint.cancel();
          }
          plus.nativeUI.toast('指纹匹配失败');
          console.log(that.fingerBool)
          if( that.fingerBool==0){
            that.fingerBool = 1
          }else{
            that.fingerBool = 0
          }

        },{
          message:"指纹授权登录"
        });
      }else{
        plus.nativeUI.toast('此设备不支持指纹设置！');
        if( that.fingerBool==0){
          that.fingerBool = 1
        }else{
          that.fingerBool = 0
        }
      }
      // this.fingerBool = e.target.value
      // uni.setStorageSync('fingerBool',e.target.value)
    },
    // 切换夜间模式
    switchChange(){
      var ui  = (this.theme == 'light') ? 'dark' : 'light';
      uni.setStorageSync('theme',ui)

      this.$store.dispatch("changeTheme",ui);
      this.$utils.setTheme(ui);
      if(ui=='dark'){
        this.value3=true
        uni.setTabBarStyle({
          color: '#a2a6a5',
          selectedColor: '#1881d2',
          backgroundColor: '#0f1a2d',
          borderStyle: 'black'
        })
      }else{
        this.value3=false
        uni.setTabBarStyle({
          color: '#8b97a0',
          selectedColor: '#238ee1',
          backgroundColor: '#ffffff',
          borderStyle: 'white'
        })

      }
    },
    uploadImg(){
      var that=this;
      uni.chooseImage({
        count: 1,
        // sizeType: ['original', 'compressed'],
        sizeType: [ 'compressed'],
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: '/api/upload', //仅为示例，非真实的接口地址
            // #ifdef APP-PLUS
            url:domain+'/api/upload',
            // #endif
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              'user': 'test'
            },
            success: (uploadFileRes) => {
              console.log(typeof uploadFileRes.data);
              var data=JSON.parse(uploadFileRes.data);
              if(data.type=='ok'){
                let head=data.message;
                console.log(head)
                that.uphead(head);
              }
            }
          });
        }
      });
    },
    uphead(head){
      let that = this;
      this.$utils.initDataToken({url:'user/head_pic',data:{head_portrait:head},type:'post'},(res,msg)=>{
        that.head = head;
      });
    },
    //获取用户信息
    getUserInfo(){
      var that = this;
      this.$utils.initDataToken({url:info,data:{},type:'POST'},(res,msg)=>{
        uni.setStorageSync('uid',msg.id);
        that.info = res;
        if(res.head_portrait){
          that.head = res.head_portrait;
        }
        try{
          uni.stopPullDownRefresh()
        }catch(e){}
      });

    },
    gocontact(){
      // #ifdef APP
      //移动端
      plus.runtime.openURL(this.mycontact)
      // #endif
      //#ifdef H5
      //window.location.href = this.mycontact;
      window.open(this.mycontact, '_blank');
      //#endif
    },
    //退出登录
    logout(){
      this.$utils.initDataToken({url:logout,data:{},type:'POST'},(res,msg)=>{
        this.$utils.clearStorageSync()

        setTimeout(()=>{
          this.$utils.showLayer(this.$t('bico.W523'),);
        },100)
        uni.redirectTo({
          url: '/pages/login/login'
        });
      });
    },
  },
}
</script>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  line-height: 1.8;
}
.container{
  min-height: 100%;
}

.top1{
  padding-top: 80px;
  height: 200px;
  background: url(../../static/images/sy_bg.png) no-repeat top;
  background-size: 100%;
  width: 100%;
  border-radius: 0 0 2vw 2vw;
}

.avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.namephobe {
  color: #fff;
  padding: 0 4vw;
}
.name {
  font-weight: bold;
  font-size: 4vw;
  padding-bottom: 2vw;
}
.phone{
  font-size: 3vw;
}
.funBox{
  padding: 0vw 2vw 0;
  position: relative;
  top: 4vw;
}
.funs{
  padding: 6vw 0;
  text-align: center;
  justify-content: space-around;
  border-radius: 0px;
  border-radius: 2vw 2vw 2vw 2vw;
  background-color: #ffffff;
  box-shadow: 1px 9px 10px -3px #f3f3f7;
}
.funsItemImage{
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
}
.funsItemText{
  font-weight:400;
  font-size: 14px;
  position: relative;
  top: 1vw;
}
.top2{
  margin-top: 100rpx;
  padding: 20rpx 30rpx 30rpx;
}
.size30 {
  font-weight:400;
  font-size: 14px;
}
.invitation{
  width: 100%;
  height: 145rpx;
  background-color: #000000;
  border-radius: 30rpx;
}
.top3{
  padding: 20vw 2vw;
  padding-top: 66vw;
}
.list{
  padding: 2vw 2vw;
  border-radius: 2vw;
  box-shadow: 0 0px 2vw #eaecf5;
  box-shadow: 0 0px 2vw #ffffff;
}
.listDark{
  box-shadow: 0 0px 2vw #0b0c15;
}
.listItem{
  padding: 18px 0;
  justify-content: space-between;
}
.listItem:not(:last-child){
  border-bottom: solid 0.4px #b0b4ca42;
}
.listItemDark:not(:last-child){
  border-bottom: solid 0.4px #161927;
}
.itemLeft>view{
  margin-left: 2vw;
}
.fixedTop{
  width: 100%;
  position: fixed;
  /* top: 86rpx; */
  top:0;
  left: 0;
  z-index: 10;
}
.avatar {

  background: #ffffff0a;
  border-radius: 50%;
  width: 16vw;
  height: 16vw;
  overflow: hidden;
  border: 1vw solid #ffffff14;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.ent {
  position: absolute;
  top: 16vw;
  right: 0;
  left: 88vw;
  color: #ffffff;
}
.enttm {
  position: absolute;
  top: 16.0vw;
  right: 0;
  left: 74vw;
  color: #ffffff;
}
.enttmm {
  position: absolute;
  top: 16.0vw;
  right: 0;
  left: 77vw;
  color: #ffffff;
}
.userInfo {
  padding: 0 3vw;
}
.iconfont {
  font-family: "iconfont" !important;

  margin-left: 4px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ente {
  position: absolute;
  top: 24vw;
  right: 0;
  left: 72vw;
  color: #ffffff;
}
.entee {
  font-size: 4vw;
  color: #ffffff;
  line-height: 1.8;
}
.aui-flex-box-fr {
  background: #9ab1e257;
  height: 7vw;
  line-height: 7vw;
  border-radius: 20vw 0 0 20vw;
  width: 40vw;
}
.aui-flex-box-fr {
  text-align: right;
  color: #ffffff;
  padding-right: 10vw;
  position: relative;
}
.icon-vip {
  position: absolute;
  top: 5px;
  left: 6px;
  padding: 0vw 0 0 0;
  background: url(../../static/images/hg.png) no-repeat;
  background-size: 100%;
}

.flex_image {
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  position: relative;
  top: -0.5vw;
}
.flex_image2 {
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  position: relative;
  top: -5vw;
}
.funsItemImages {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  position: relative;
  top: 0.9vw;
}

.funsItemText2 {
  font-weight:400;
  font-size: 3.6vw;
  position: relative;
  top: -4vw;
  left: -71vw;
}

.flex_image3 {
  width: 2vw;
  height: 4vw;
  border-radius: 50%;
  position: relative;
  right: 0;
  left: -1vw;
}

/* .u-switch[data-v-4a8c9de7] {
    width: 10vw;
    height: 5vw;
} */
</style>
